<template>
  <div>
    <page-main class="searchMain">
      <!-- 搜索 -->
      <div class="searchBox">
        <span>搜索</span>
        <el-input
          v-model="searchValue"
          class="search"
          @keyup.enter="searchInputList"
          placeholder="请输入ID 单位名称或者监管等级"
        ></el-input>
      </div>
    </page-main>
    <page-main>
      <el-table :data="dataInfo.list" :default-sort="{ prop: 'id', order: 'ascending' }" v-loading="dataLoading">
        <el-table-column label="执行日期" prop="exec_date"></el-table-column>
        <el-table-column label="区域" width="210">
          <template #default="scope">
            <span> {{ scope.row.region_name }} > {{ scope.row.area_name }} </span>
          </template>
        </el-table-column>
        <el-table-column label="社会单位" width="200">
          <template #default="scope">
            <span> {{ scope.row.unit_name }} > {{ scope.row.sub_unit_name }} </span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="社区名" prop="area_name"></el-table-column>  -->
        <el-table-column label="提交人" prop="user_name"></el-table-column>
        <el-table-column label="是否关门" prop="is_door">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.is_door === 1">已关</el-tag>
            <el-tag type="danger" v-else>未关</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否关电" prop="is_electric">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.is_door === 1">已关</el-tag>
            <el-tag type="danger" v-else>未关</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否关气" prop="is_gas">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.is_gas === 1">已关</el-tag>
            <el-tag type="danger" v-else>未关</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否关水" prop="is_water">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.is_water === 1">已关</el-tag>
            <el-tag type="danger" v-else>未关</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column label="社会单位审核人员" prop="unit_verify_user_name"></el-table-column>
                <el-table-column label="商户审核人员" prop="sub_unit_verify_user_name"></el-table-column> -->
        <!-- 1已审核 0 未审核 -->
        <el-table-column label="商户审核" prop="sub_unit_verify_time">
          <template #default="scope">
            <div>
              {{ scope.row.sub_unit_verify_user_name }}
            </div>
            <div :class="$getTime(scope.row.sub_unit_verify_time) === '未审核' ? 'red' : 'gray'">
              {{ $getTime(scope.row.sub_unit_verify_time) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="社会单位审核" prop="unit_verify_time">
          <template #default="scope">
            <div>
              <div>
                {{ scope.row.unit_verify_user_name }}
              </div>
              <div :class="$getTime(scope.row.unit_verify_time) === '未审核' ? 'red' : 'gray'">
                {{ $getTime(scope.row.unit_verify_time) }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否审核" prop="unit_verify">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.is_door === 1">已审核</el-tag>
            <el-tag type="danger" v-else>未审核</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="未审核时间" prop="no_audit_time" width="165"> </el-table-column>
        <!-- <el-table-column width="150">
                    <template #header>
                        <el-button size="mini" type="primary" @click="add">添加</el-button>
                    </template>
                    <template #default="scope">
                        <el-button size="mini" type="primary" @click="edit(scope.row)">修改</el-button>
                        <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column> -->
        <el-table-column label="创建日期" prop="create_time">
          <template #default="scope">
            <div>{{ $getTime(scope.row.create_time) }}</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          v-model:currentPage="dataInfo.page"
          :page-count="dataInfo.total_page"
          :total="dataInfo.total"
          layout="total,prev, pager, next, jumper"
          background
        ></el-pagination>
        <!-- <el-pagination
        :current-page="pagination.page"
        :total="total"
        :page-size="pagination.size"
        :page-sizes="pagination.sizes"
        :layout="pagination.layout"
        :hide-on-single-page="false"
        class="pagination"
        background
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      /> -->
      </div>
    </page-main>
    <!-- <el-dialog
            :title="dialogTitle"
            v-model="dialogFormVisible"
            :close-on-click-modal="false"
            @close="closeDialog"
        >
            <el-form :model="formData">
                <el-row>
                    社会单位选择
                    <el-col :span="6" :offset="1">
                        <el-form-item label="社会单位选择" prop="unit_id">
                            <el-select v-model="formData.unit_id" placeholder="请选择">
                                <el-option
                                v-for="item in societyList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">
                        经纬度
                        <el-form-item label="单位坐标" prop="longitude">
                            <div style="display: flex; align-item: center;">
                                <el-input
                                style="width: 40%; margin-right: 1%;"
                                disabled
                                v-model="formData.longitude"
                                ></el-input>
                                <el-input
                                style="width: 40%; margin-right: 1%;"
                                disabled
                                v-model="formData.latitude"
                                ></el-input>
                                <el-button @click="getLatLng">定位</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                    网格选择
                    <el-col :span="6" :offset="1">
                        <el-form-item label="网格选择" prop="area_id">
                            <el-cascader
                                v-model="formData.area_id"
                                :options="interLists"
                                @change="handleChange"
                                :props="cascaderProps"
                                :emitPath="false"
                                :disabled="disabled"
                            ></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                    <el-col :span="6" :offset="1">

                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </span>
            </template>
        </el-dialog> -->
    <!-- 分页 -->
  </div>
</template>
<script>
// 分页
import paginationMixin from '@/mixins/pagination'
export default {
  // 分页
  mixins: [paginationMixin],
  data() {
    return {
      searchValue: '',
      // 总页数
      total: 0,
      dataInfo: {
        list: []
      },
      dataLoading: false,
      // 列表
      dataList: [{ name: 1 }]
      // 模态框显示隐藏
      // dialogFormVisible: false,
      // formLabelWidth: '120px',
      // // 模态框标题
      // dialogTitle: '',
      // // 提交数据
      // formData: {
      //     longitude: '',  // 经度
      //     latitude: '',   // 纬度
      // }
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    handleCurrentChange(e) {
      this.getDataList(e)
    },
    // 获取数据
    getDataList(page = 1) {
      // 分页
      this.dataLoading = true
      let query = {
        rows: this.pagination.size,
        page: page,
        keywords: this.searchValue,
        is_close: 0
      }
      this.$api
        .post('/unit/MyXf/Lists', query)
        .then((res) => {
          this.dataInfo = res.data
        })
        .finally(() => {
          this.dataLoading = false
        })
    },
    // 搜索
    searchInputList() {
      this.getDataList()
    }
    // 修改
    // edit(row) {
    //     this.dialogFormVisible = true
    //     this.dialogTitle = '编辑'
    // },
    // // 删除
    // del (row) {

    // },
    // // 添加
    // add () {
    //     this.dialogTitle = '添加'
    //     this.dialogFormVisible = true
    // },
    // // 点击取消
    // cancel() {
    //     this.dialogFormVisible = false
    // },
    // // 提交
    // submitForm() {
    //     this.dialogFormVisible = false
    // },
    // 获取经纬度
    // getLatLng() {
    //     this.$getLocaion(returnCitySN["cip"]).then((res) => {
    //         let temp = res.data.location.split(',')
    //         this.formData.longitude=temp[0]//经度
    //         this.formData.latitude=temp[1]//纬度
    //     });
    // }
  }
}
</script>
<style lang="scss" scoped>
.block {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.red {
  color: red;
}
.gray {
  color: rgb(10, 184, 10);
}
.searchBox {
  display: flex;
  span {
    width: 50px;
    line-height: 40px;
    text-align: center;
  }
  .search {
    width: 30%;
  }
}
.searchMain {
  height: 80px;
}
</style>
